<template>
    <div>
        <div class='class_ssk'>
            <input type='text' placeholder='搜索您主子需要的商品' confirm-type='搜索' />
            <img src='/static/images/class_ssk.svg' />
        </div>
        <div class='class_content'>
            <div class='class_content_one' @click='tiaozhuan()'>
                <div style='margin:65rpx 198rpx 0 138rpx; text-align: center; display:flex;flex-direction: column;'>
                    <span style='font-size:32rpx;color:#505050;'>主粮</span>
                    <span style='font-size:20rpx;color:#a6a6a6;'>喵粮、狗粮</span>
                </div>
                <div>
                    <img style='margin-top:24rpx; width: 169rpx;height: 209rpx;' src='/static/images/index_pet8.png' />
                </div>
            </div>
        </div>

        <div class='class_content_two'>
            <div class='class_content_left' style='border-top-left-radius: 20rpx; ' @click='tiaozhuan()'>
                <span class='text1'>生活用品</span>
                <span class='text2'>美好时光、享受时光</span>
                <img style='margin:24rpx auto; width:121rpx;height:107rpx;' src='/static/images/index_pet6.png' />
            </div>
            <div class='class_content_left' style='border-top-right-radius: 20rpx; background:#fbf7ee;' @click='tiaozhuan()'>
                <span class='text1'>零食</span>
                <span class='text2'>主子最爱</span>
                <img style='margin:12rpx auto; width:224rpx;height:141rpx;' src='/static/images/index_pet7.png' />
            </div>

        </div>

        <div class='class_content_two'>
            <div class='class_content_left' style='border-bottom-left-radius: 20rpx; background:#fadae2; text-align: center;' @click='tiaozhuan()'>
                <span class='text1' style='margin-top:60rpx;'>营养膏</span>
                <span class='text2'>元气满满每一天</span>
            </div>
            <div class='class_content_left' style='border-bottom-right-radius: 20rpx; background:#e0f3f2; text-align: center;' @click='tiaozhuan()'>
                <span class='text1' style='margin-top:60rpx;'>玩具</span>
                <span class='text2'>逗主神器</span>
            </div>

        </div>

        <div class='class_content_the' @click='tiaozhuan()'>
            <span style='margin-top:57rpx; font-size:32rpx;color:#505050;'>驱虫除菌</span>
            <span style='margin-top:12rpx; font-size:20rpx;color:#a6a6a6;'>为主子着想</span>

        </div>
    </div>

</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";

export default {
    data() {
        return {};
    },

    components: {
        card
    },

    methods: {
        tiaozhuan: function() {
            wx.navigateTo({
                url: "/pages/paging/main"
            });
        }
    },

    created() {}
};
</script>

<style>
/* pages/class/class.wxss */

.class_ssk {
    display: flex;
    /* position: relative; */
    margin-bottom: 23rpx;
}

.class_ssk input {
    width: 690rpx;
    height: 68rpx;
    border-radius: 35rpx;
    font-size: 28rpx;
    background: #f9f9f9;
    margin-left: 30rpx;
    padding: 0 40rpx;
}

.class_ssk image {
    width: 48rpx;
    height: 48rpx;
    position: relative;
    right: 85rpx;
    top: 12rpx;
}

.class_content_one {
    width: 690rpx;
    height: 250rpx;
    background: #f7eff7;
    border-radius: 21rpx;
    margin-left: 30rpx;
    display: flex;
}

.class_content_two {
    margin: 13rpx 30rpx;
    display: flex;
    justify-content: space-between;
}

.class_content_left {
    display: flex;
    flex-direction: column;
    padding: 23rpx 35rpx;
    width: 270rpx;
    height: 204rpx;
    background: #edf7ec;
}

.class_content_left .text1 {
    color: #505050;
    font-size: 28rpx;
}

.class_content_left .text2 {
    color: #a6a6a6;
    font-size: 20rpx;
}

.class_content_the {
    background: #f2ecff;
    width: 690rpx;
    height: 198rpx;
    border-radius: 21rpx;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
</style>
